<!-- 创建团队弹窗 -->
<template>
  <uni-popup ref="popup" type="center">
    <div class="container">
      <div class="create-title">创建团队</div>
      <div class="team-name">
        <div class="text">团队名称：</div>
        <input
          :value="teamInfo.name"
          type="text"
          class="input"
          @input="onTeamNameInput"
          placeholder="最多16个字符"
        />
      </div>
      <div class="team-avatar">
        <div class="text">团队头像：</div>
        <image
          class="avatar"
          :src="
            teamInfo.avatar
              ? teamInfo.avatar
              : 'https://ustatic.hudongmiao.com/joymew-host-contest/202310-activity/plus-rect.svg'
          "
          mode="aspectFill"
          @click="onTeamAvatarClick"
        />
      </div>
      <!-- <div class="team-area">
        <div class="text">参赛地区：</div>
        <input :value="teamInfo.area" type="text" class="input" />
        <uni-icons
          type="location"
          size="18"
          color="#FF403C"
          class="location-icon"
        ></uni-icons>
      </div> -->
      <div class="tip">注：团队创建后不可更改</div>
      <div class="confirm" @click="onConfirmClick">确定</div>
      <div class="cancel" @click="close"></div>
    </div>
  </uni-popup>
</template>

<script setup lang="ts">
import { chooseMedia } from "@uni-helper/uni-promises";

const currentInstance = getCurrentInstance();

// #region 开关弹窗相关

/** 打开弹窗 */
const open = () => {
  const popup = currentInstance?.refs.popup as UniHelper.UniPopup;
  popup?.open();
};

/** 关闭弹窗 */
const close = () => {
  const popup = currentInstance?.refs.popup as UniHelper.UniPopup;
  popup?.close();
};

defineExpose({
  open,
  close,
});

// #endregion

// #region 团队信息相关

const teamInfo = ref({
  name: "",
  avatar: "",
  // area: "",
});

/** 输入团队名称事件 */
const onTeamNameInput = (e: UniHelper.InputOnInputEvent) => {
  teamInfo.value.name = e.detail.value.trim().slice(0, 6);
  return teamInfo.value.name;
};

/** 输入团队地区事件 */
// const onTeamAreaInput = (e: UniHelper.InputOnInputEvent) => {
//   teamInfo.value.area = e.detail.value.trim().slice(0, 6);
//   return teamInfo.value.area;
// };

/** 点击团队头像事件 */
const onTeamAvatarClick = async () => {
  const chooseImageRes = await chooseMedia({
    count: 1,
    mediaType: ["image"],
    sourceType: ["album", "camera"],
  });
  if (chooseImageRes.errMsg === "chooseMedia:ok") {
    teamInfo.value.avatar = chooseImageRes.tempFiles[0].tempFilePath;
  }
};

/**
 * 通过地图API获取到目标位置
 */
const chooseLocation = () => {
  console.log("chooseLocation");
  uni.getLocation({
    type: "gcj02", //返回可以用于uni.openLocation的经纬度
    success: function (res) {
      console.log(res);
      const latitude = res.latitude;
      const longitude = res.longitude;
      uni.openLocation({
        latitude: latitude,
        longitude: longitude,
        success: function () {
          console.log("success");
        },
      });
    },
    fail: function (err) {
      console.log(err);
    }
  });
};

const emit = defineEmits<{
  (event: "confirm", data: typeof teamInfo.value): void;
}>();

/** 「确认创建」按钮点击事件 */
const onConfirmClick = () => {
  if (!teamInfo.value.name) {
    uni.showToast({
      title: "请输入团队名称",
      icon: "none",
    });
    return;
  }
  if (!teamInfo.value.avatar) {
    uni.showToast({
      title: "请上传团队头像",
      icon: "none",
    });
    return;
  }
  // if (!teamInfo.value.area) {
  //   uni.showToast({
  //     title: "请选择参赛地区",
  //     icon: "none",
  //   });
  //   return;
  // }

  emit("confirm", teamInfo.value);
  close();
};

// #endregion
</script>

<style scoped lang="scss">
.container {
  width: 80vw;
  height: 95vw;

  background: #fff;
  border-radius: 16px;

  padding: 24px 16px;
  display: grid;
  grid-template:
    "title" min-content
    "." 32px
    "team-name" min-content
    "." 19px
    "team-avatar" min-content
    "." 19px
    // "team-area" min-content
    // "." 19px
    "tip" min-content
    "." 24px
    "confirm" min-content
    "." 16px
    / 1fr;
  align-items: center;
  justify-items: center;
  position: relative;
  .title {
    grid-area: title;

    width: 112px;
    height: 20px;
  }

  .team-name {
    grid-area: team-name;

    width: 100%;

    display: flex;
    align-items: center;

    .text {
      font-size: 16px;
      color: #333;
    }

    .input {
      height: 30px;

      border: 1px solid #d7d7d7;
      border-radius: 2px;

      padding: 0 10px;
      flex: 1;
    }
  }

  .team-avatar {
    grid-area: team-avatar;

    width: 100%;

    display: flex;

    .text {
      font-size: 16px;
      color: #333;
    }

    .avatar {
      width: 66px;
      height: 66px;
    }
  }

  .team-area {
    grid-area: team-area;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    .text {
      font-size: 16px;
      color: #333;
    }
    .input {
      height: 30px;

      border: 1px solid #d7d7d7;
      border-radius: 2px;

      padding: 0 10px;
      flex: 1;
    }
    .location-icon {
      position: absolute;
      right: 15rpx;
    }
  }

  .tip {
    grid-area: tip;

    font-size: 15px;
    color: #6147ff;
    text-align: center;
  }

  .confirm {
    grid-area: confirm;

    width: 240px;
    height: 36px;

    background: $button-bg;
    border-radius: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    color: #fff;
  }

  .cancel {
    width: 65rpx;
    height: 65rpx;
    background-size: 100% 100%;
    background-image: url("https://ustatic.joymew.com/%20miao/ywq/close-icon.png");
    position: absolute;
    bottom: -109rpx;
  }
}
</style>
